<template>
    <div class="app-container" style="padding:20px">
        <el-card>
            <FormTopBar title="工作计划" :flowInsId="form.flowInsId" :taskId="taskId" :businessId="form.id"
                        :billType="form.billType" @submitForm="()=>{}"></FormTopBar>
        </el-card>

        <!-- 添加或修改员工入职对话框 -->
        <el-form ref="form" :model="form" label-width="120px">
            <el-card class="top15">
                <el-form-item label="计划标题" prop="title">
                    <el-input v-model="form.title" placeholder="请输入计划标题" :disabled="readonly"/>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="form.remark" type="textarea" :rows="5" placeholder="请输入内容" :disabled="readonly"/>
                </el-form-item>


                <el-divider content-position="center">工作计划安排信息</el-divider>


                <el-table :border="Global.tableShowBorder" :data="oaWorkPlanItemList" :row-class-name="rowOaWorkPlanItemIndex" ref="oaWorkPlanItem">
                    <el-table-column label="序号" align="center" prop="index" width="50"/>
                    <el-table-column label="跟踪" align="center" class-name="small-padding fixed-width" width="100">
                        <template slot-scope="scope">
                            <el-button size="mini" type="text" icon="el-icon-view" @click="track(scope.row)" :disabled="false" style="color: #34bfa3">跟踪</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
                        <template slot-scope="scope">
                            <el-button size="mini" type="text" v-if="scope.row.status!='1'&&scope.row.status!='2'" icon="el-icon-view" @click="changeStatus(scope.row,'1','启动')" :disabled="false">启动</el-button>
                            <el-button size="mini" type="text" v-if="scope.row.status!='3'" icon="el-icon-view" @click="changeStatus(scope.row,'3','搁置')" :disabled="false" style="color: #f8ac59">搁置</el-button>
                            <el-button size="mini" type="text" v-if="scope.row.status!='2'" icon="el-icon-view" @click="changeStatus(scope.row,'2','完成')" :disabled="false" style="color: red">完成</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="任务描述" prop="detail">
                    </el-table-column>
                    <el-table-column label="负责人" prop="dutyNickName" width="150">
                    </el-table-column>
                    <el-table-column label="计划开始时间" prop="startTime" width="150">
                    </el-table-column>
                    <el-table-column label="计划结束时间" prop="endTime" width="150">
                    </el-table-column>
                    <el-table-column label="产出物" prop="makeObject" width="150">
                    </el-table-column>
                    <el-table-column label="进度" prop="schedule" width="150">
                        <template slot-scope="scope">
                            <el-slider v-model="scope.row.schedule" v-if="scope.row.status=='1'" @change="changeSchedule(scope.row)"></el-slider>
                            <el-slider v-model="scope.row.schedule" v-if="scope.row.status!='1'" :disabled="true"></el-slider>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" prop="status" width="150">
                        <template slot-scope="scope">
                            <dict-tag :options="dict.type.progress_status" :value="scope.row.status"/>
                        </template>
                    </el-table-column>
                </el-table>

            </el-card>
        </el-form>

        <el-drawer title="任务跟踪" :visible.sync="showTrack" direction="rtl" :before-close="closeTrack">
            <el-button type="primary" plain icon="el-icon-circle-plus-outline" size="mini" @click="openAddTrackDialog" style="margin-left: 10px;">添加跟踪信息</el-button>
            <div class="trackList">
                <div class="row" v-for="item in trackList">
                    <div class="avatar">
                        <el-avatar v-if="!util.isEmpty(item.avatar)" :size="40" :src="baseUrl+item.avatar">
                            <el-avatar :size="60" :style="`font-size: 20px;background-color: ${extractColorByName(item.trackNickName)}`" >
                                {{item.trackNickName.substr(0,1)}}
                            </el-avatar>
                        </el-avatar>

                        <el-avatar v-if="util.isEmpty(item.avatar)" :size="40" :style="`font-size: 20px;background-color: ${extractColorByName(item.trackNickName)}`" >
                            {{item.trackNickName.substr(0,1)}}
                        </el-avatar>
                    </div>
                    <el-card shadow="never" class="item" >
                        <div>
                            {{item.track}}
                        </div>
                        <div style="font-size: 12px;color: #666666;margin-top: 20px;">
                            {{item.createTime}}
                        </div>
                    </el-card>
                </div>

            </div>
        </el-drawer>

        <el-dialog title="添加跟踪信息" :visible.sync="openAddTrack" width="600px" append-to-body>
            <el-form ref="addTrackForm" :model="addTrackForm" :rules="addTrackFormRules" label-width="120px">
                <el-form-item label="跟踪内容" prop="track">
                    <el-input v-model="addTrackForm.track" type="textarea" :rows="6" placeholder="请输入跟踪内容" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveTrack">确 定</el-button>
                <el-button @click="cancelAddTrack">取 消</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import FlowInfo from "@/views/workflow/flow/flowInfo";
import FormTopBar from "@/views/workflow/common/formTopBar"
import {addWorkPlan, getWorkPlan, updateItem, updateWorkPlan} from "@/api/oa/workPlan";
import {listWorkPlanItemTrackAll,updateWorkPlanItemTrack,addWorkPlanItemTrack,delWorkPlanItemTrack} from "@/api/oa/workPlanItemTrack"
export default {
    name: "WorkPlanTrack",
    components:{FlowInfo,FormTopBar},
    dicts:['progress_status'],
    data() {
        return {
            showTrack:false,
            openAddTrack:false,
            clickRowId:null,
            trackList:[],
            baseUrl: process.env.VUE_APP_BASE_API,
            fit:"cover",
            // 工作计划安排表格数据
            oaWorkPlanItemList: [],
            // 表单参数
            form: {

            },
            addTrackForm:{

            },
            showFlowInfo:false,
            taskId:'',
            readonly:false,
            // 表单校验
            addTrackFormRules: {
                track: [
                    {required: true, message: "跟踪内容不能为空", trigger: "change"}
                ]
            },
        };
    },
    provide(){
        return {
            addCcedList:this.addCcedList
        }
    },
    created() {
        //单据的id主键
        const formId = this.$route.params && this.$route.params.formId;
        //单据的类型
        const billType = this.$route.params && this.$route.params.billType;
        const taskId = this.$route.query && this.$route.query.taskId;
        const readonly = this.$route.query && this.$route.query.readonly;
        if(billType){
            this.form.billType = billType;
        }
        if(taskId){
            this.taskId = taskId;
        }
        if("1"==readonly){
            this.readonly = true;
        }
        if(formId){
            this.form.id = formId;
            this.getDetailData(formId);
        }
    },
    mounted() {
    },
    methods: {
        //  获取单据信息
        getDetailData(id) {
            getWorkPlan(id).then(response => {
                this.form = response.data;
                this.oaWorkPlanItemList = response.data.oaWorkPlanItemList;
            });
        },
        /** 工作计划安排序号 */
        rowOaWorkPlanItemIndex({row, rowIndex}) {
            row.index = rowIndex + 1;
        },
        clickRow(row){
            this.showTrack = true;
        },
        closeTrack(){
            this.showTrack = false;
        },
        changeStatus(row,status,name){
            this.$modal.confirm('是否'+name+'该任务？').then( ()=> {
                let data = {
                    id:row.id,
                    status:status
                }
                updateItem(data).then(res=>{
                    this.$modal.msgSuccess("启动成功");
                    this.getDetailData(this.form.id);
                })
            })
        },
        changeSchedule(row){
            let data = {
                id:row.id,
                schedule:row.schedule
            }
            updateItem(data).then(res=>{
                this.$modal.msgSuccess("进度更新成功");
                this.getDetailData(this.form.id);
            })
        },
        //点击某一行
        track(row){
            this.clickRowId = row.id;
            //给新增的表单赋值
            this.addTrackForm.itemId = row.id;
            this.getTrackList();
        },
        getTrackList(){
            //查询列表
            let data = {
                itemId:this.clickRowId,
                orderByColumn: "createTime",
                isAsc: "descending",
            }
            listWorkPlanItemTrackAll(data).then(res=>{
                this.trackList = res.data;
                this.showTrack = true;
            })
        },
        openAddTrackDialog(){
            this.openAddTrack = true;
        },
        cancelAddTrack(){
            this.openAddTrack = false;
        },
        saveTrack(){
            this.$refs["addTrackForm"].validate(valid => {
                if (valid) {
                    addWorkPlanItemTrack(this.addTrackForm).then(response => {
                        this.$modal.msgSuccess("保存成功");
                        this.getTrackList();
                        this.cancelAddTrack();
                    });
                }
            });
        },
        extractColorByName(name) {
            var temp = [];
            temp.push("#");
            if(name){
                for (let index = 0; index < name.length; index++) {
                    temp.push(parseInt(name[index].charCodeAt(0), 10).toString(16));
                }
                return temp.slice(0, 5).join('').slice(0, 4);
            }else{
                return "#666";
            }
        },
        // 创建单据时候，选择了抄送人
        addCcedList(ccedList){
            this.form.ccedList = ccedList;
            console.log("回填抄送人")
            console.log(this.form)
        }
    }
};
</script>
<style scoped lang="scss">
    .trackList{
        display: flex;
        flex-direction: column;
        margin-top: 5px;
        .row{
            display: flex;
            flex-direction: row;
            .avatar{
                margin: 10px;
            }
            .item{
                margin: 5px 20px 5px 5px;
                font-size: 14px;
                width: 100%;
            }
        }
    }
</style>
